<template>
    <view style="height: 100%">
        <top title="订单详情" color="#fff" bgc="transparent" position="absolute" img="2"></top>
        <view class="bgc-box"></view>
        <!-- <view class='bgc-box bgc-box1'></view> -->

        <view class="pr mt10">
            <view class="df ac" v-if="info.is_refund == 1">
                <image class="img28" src="https://wx.xtwaixie.com/img/tk.png" />
                <h2 class="f20 f600 cf db ml8">退款审核中</h2>
            </view>
            <view class="df ac" v-if="info.is_refund == 2">
                <image class="img28" src="https://wx.xtwaixie.com/img/tkcg.png" />
                <h2 class="f20 f600 cf db ml8">退款成功</h2>
            </view>
            <view class="df ac" v-if="info.is_refund == 3">
                <image class="img28" src="https://wx.xtwaixie.com/img/bh.png" />
                <h2 class="f20 f600 cf db ml8">退款已驳回</h2>
            </view>

            <!-- 地址 -->
            <view class="mt15 bgcf br12 df ac pd15">
                <image class="img20 mr12" src="https://wx.xtwaixie.com/img/add1.png" />
                <view class="f1">
                    <view class="df ac f16 c28 f600">
                        <p class="mr12">{{ info.username }}</p>
                        <p>{{ info.mobile }}</p>
                    </view>
                    <p class="db mt3 f13 c6b">{{ info.province + info.city + info.area + info.address }}</p>
                </view>
            </view>

            <!-- 商品详情 -->
            <view class="mt12 bgcf br12 pd15">
                <p class="db f16 c28 f600">商品信息</p>
                <view class="pd150 df bbf1">
                    <image class="img72 br8 mr8"  referrerPolicy='no-referrer' :src="info.thumb" />
                    <view class="f1">
                        <h2 class="w224 ovh db f14 c28">{{ info.title }}</h2>
                        <p class="db mt2 f12 c9d">{{ info.sku_title }}</p>
                        <view class="df ac sb mt15">
                            <p class="f12 c28 f500">¥{{ info.price }}</p>
                            <view class="pr">
                                <p class="f12 c9d tk-xs">×{{ info.number }}</p>
                                <!-- <p class="f12 c10" wx:if='{{item.is_refund == 1}}'>退款审核中</p>
							<p class="f12 c3a db" wx:if='{{item.is_refund == 2}}'>退款成功</p>
							<p class="f12 cf5 db" wx:if='{{item.is_refund == 3}}'>退款已驳回</p> -->
                            </view>
                        </view>
                    </view>
                </view>
                <ul class="db">
                    <li class="df ac sb mt10">
                        <p class="f12 c6b">退款金额</p>
                        <p class="f12 c6b">¥{{ info.need_price }}</p>
                        <!-- <p class='f12 c6b'><span class='c9d'>（未含税）</span> ¥{{info.need_price}}</p> -->
                    </li>
                    <!-- <li class='df ac sb mt10'>
				<p class='f12 c6b'>运费</p>
				<p class='f12 c6b'>¥{{info.express_fee}}</p>
			</li>
			<li class='df ac sb mt10'>
				<p class='f12 c28 f600'>订单总价</p>
				<p class='f12 cff8 f600'><span class='f400'>（含税）</span> ¥{{info.total_price}}</p>
			</li> -->
                    <li class="df ac sb mt10">
                        <p class="f12 c9d"></p>
                        <button class="contact-but" open-type="contact">联系客服</button>
                    </li>
                </ul>
            </view>

            <!-- 订单编号 -->
            <ul class="db mt12 bgcf br12 pd15">
                <li class="df ac">
                    <p class="f12 c9d">退款编号</p>
                    <p class="f12 c28 f1 ml15">{{ info.order_sn }}</p>
                    <P class="cop-but ml15" :data-text="info.order_sn" @tap.native="copyText($event, { text: info.order_sn })">复制</P>
                </li>
                <li class="df ac mt10">
                    <p class="f12 c9d">申请时间</p>
                    <p class="f12 c28 f1 ml15">{{ info.order_refund_at }}</p>
                </li>
            </ul>
        </view>
    </view>
</template>

<script>
import top from '@/component/top/top';
const http = require('../../utils/http');
export default {
    components: {
        top
    },
    data() {
        return {
            id: '',
            info: {
                is_refund: 0,
                username: '',
                mobile: '',
                province: '',
                city: '',
                area: '',
                address: '',
                thumb: '',
                title: '',
                sku_title: '',
                price: '',
                number: '',
                need_price: '',
                order_sn: '',
                order_refund_at: ''
            }
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.setData({
            id: options.id || 0
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        this.getDetail();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        // 获取详情
        getDetail() {
            http.request('order/refundOrderInfo', {
                id: this.id
            })
                .then((res) => {
                    this.setData({
                        info: res.data
                    });
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                });
        },

        copyText(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            console.log('占位：函数 copyText 未声明');
        }
    }
};
</script>
<style>
@import './returnDetail.css';
</style>
